<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的学生 - 教学管理系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding-top: 20px;
        }

        .sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid #3c5166;
        }

        .sidebar-header h2 {
            margin: 0;
            font-size: 20px;
        }

        .user-info {
            margin-top: 10px;
            font-size: 14px;
            opacity: 0.8;
        }

        .menu {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

        .menu li {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu li:hover {
            background-color: #3c5166;
        }

        .menu li.active {
            background-color: #3498db;
        }

        .menu a {
            color: white;
            text-decoration: none;
            display: block;
        }

        .content {
            flex: 1;
            padding: 20px;
        }

        .content-header {
            margin-bottom: 30px;
        }

        .content-header h1 {
            margin: 0;
            color: #333;
            font-size: 24px;
        }

        .search-box {
            margin-bottom: 20px;
        }

        .search-box input {
            width: 300px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .search-box button {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;
        }

        .students-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .course-filter {
            margin-bottom: 20px;
        }

        .course-filter select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            width: 300px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th,
        table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        table th {
            background-color: #f8f9fa;
            color: #333;
            font-weight: 600;
        }

        table tr:hover {
            background-color: #f5f5f5;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            background-color: #3498db;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        .logout {
            margin-top: auto;
            padding: 20px;
        }

        .logout a {
            color: #e74c3c;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>教学管理系统</h2>
                <div class="user-info" th:if="${session.user}">
                    <span th:text="${session.user.username}">teacher1</span> - 教师
                </div>
            </div>
            <ul class="menu">
                <li><a href="/teacher/dashboard">我的概览</a></li>
                <li><a href="/teacher/courses">我的课程</a></li>
                <li class="active"><a href="/teacher/students">我的学生</a></li>
                <li><a href="/teacher/grades">成绩管理</a></li>
                <li><a href="/teacher/profile">个人信息</a></li>
            </ul>
            <div class="logout">
                <a href="/logout">退出登录</a>
            </div>
        </div>

        <div class="content">
            <div class="content-header">
                <h1>我的学生</h1>
            </div>

            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索学生姓名或学号">
                <button onclick="searchStudents()">搜索</button>
            </div>

            <div class="course-filter">
                <select id="courseFilter" onchange="filterStudents()">
                    <option value="all">所有课程</option>
                    <option th:each="course : ${courses}" th:value="${course.courseId}"
                        th:text="${course.name + ' (' + course.courseId + ')'}">计算机导论 (CS101)</option>
                </select>
            </div>

            <div class="students-container">
                <table>
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>班级</th>
                            <th>专业</th>
                            <th>课程</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="studentsTable">
                        <tr th:if="${students == null || students.isEmpty()}">
                            <td colspan="7" style="text-align: center;">暂无学生数据</td>
                        </tr>
                        <tr th:each="student : ${students}" th:attr="data-course-id=${student.courseId}">
                            <td th:text="${student.studentId}">20230001</td>
                            <td th:text="${student.name}">张三</td>
                            <td th:text="${student.gender}">男</td>
                            <td th:text="${student.className}">计算机1班</td>
                            <td th:text="${student.major}">计算机科学与技术</td>
                            <td th:text="${student.courseName}">计算机导论</td>
                            <td>
                                <a th:href="@{'/teacher/student/' + ${student.studentId}}" class="btn">详情</a>
                                <a th:href="@{'/teacher/course/' + ${student.courseId} + '/student/' + ${student.studentId} + '/grade'}"
                                    class="btn" style="background-color: #f39c12;">成绩</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('教师学生页面加载完成');
        });

        // 搜索学生
        function searchStudents() {
            const searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();
            const courseFilter = document.getElementById('courseFilter').value;

            console.log('搜索学生:', searchTerm, '课程过滤:', courseFilter);

            const rows = document.querySelectorAll('#studentsTable tr:not(:first-child)');
            let matchCount = 0;

            rows.forEach(row => {
                const studentId = row.cells[0].textContent.toLowerCase();
                const studentName = row.cells[1].textContent.toLowerCase();
                const courseId = row.getAttribute('data-course-id');

                const matchesCourse = courseFilter === 'all' || courseFilter === courseId;
                const matchesSearch = studentId.includes(searchTerm) ||
                    studentName.includes(searchTerm) ||
                    searchTerm === '';

                if (matchesCourse && matchesSearch) {
                    row.style.display = '';
                    matchCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            // 显示搜索结果为空的提示
            const emptyRow = document.querySelector('#studentsTable tr:first-child');
            if (emptyRow && emptyRow.cells[0].getAttribute('colspan')) {
                if (matchCount === 0 && rows.length > 0) {
                    emptyRow.style.display = '';
                    emptyRow.cells[0].textContent = '未找到匹配的学生';
                } else {
                    emptyRow.style.display = rows.length === 0 ? '' : 'none';
                }
            }
        }

        // 按课程过滤学生
        function filterStudents() {
            searchStudents();
        }
    </script>
</body>

</html>